/**
 *spring board 
 */
var dashboard = (function(){   
         
    var dashboardTmp = [
        '<div class="dashboard mainContentPane" style="padding:5px 15px;height: calc(100% - 10px);width: calc(100% - 30px);overflow: auto;">',
            '<div class="cardSection">',
                '<h2 class="cardGroupTitle">',
                    '<span lan="app.im.dashboard.title.chat"></span>',
                    '<span class="isearchBar"><icon title="filter chat" class="isearch responsive"></icon><input class="isearchInput" rid="chatGroupList" /></span>',
                '</h2>',
                '<div class="cardGroup" id="chatGroupList"></div>',
            '</div>',
            '<div class="cardSection eventBoard hidden">',
                '<h2 class="cardGroupTitle">',
                    '<span lan="app.im.dashboard.title.event"></span>',
                    '<span class="isearchBar"><icon title="filter event" class="isearch responsive"></icon><input class="isearchInput" rid="eventList" /></span>',
                '</h2>',
                '<div class="cardGroup" id="eventList"></div>',
            '</div>',
            '<div class="cardSection surveyBoard hidden">',
                '<h2 class="cardGroupTitle">',
                    '<span lan="app.im.dashboard.title.survey"></span>',
                    '<span class="isearchBar"><icon title="filter survey" class="isearch responsive"></icon><input class="isearchInput" rid="surveyList" /></span>',
                '</h2>',
                '<div class="cardGroup" id="surveyList"></div>',
            '</div>',
            '<div class="cardSection linkBoard hidden">',
                '<h2 class="cardGroupTitle">',
                    '<span lan="app.im.dashboard.title.link"></span>',
                    '<span class="isearchBar"><icon title="filter link" class="isearch responsive"></icon><input class="isearchInput" rid="urlList" /></span>',
                '</h2>',
                '<div class="cardGroup" id="urlList"></div>',
            '</div>',            
            // '<div class="cardSection pageBoard hidden">',
                // '<h2 class="cardGroupTitle">',
                    // '<span>Webpage</span>',
                    // '<span class="isearchBar"><icon title="filter page" class="isearch responsive"></icon><input class="isearchInput" rid="pageList" /></span>',
                // '</h2>',
                // '<div class="cardGroup" id="pageList"></div>',
            // '</div>',
        '</div>'
    ].join('');
        
    return Observable.create({
        init : function(){
            if(this.$container){
                if(!this.isInited){
                    this.$wrapper = $(dashboardTmp).appendTo(this.$container);
                    lan.parse(this.$wrapper);
                    chatGroupList.init();
                    eventList.init();
                    urlList.init();
                    
                    //pageList.init();
                    surveyList.init();
                    this.isInited = true;                    
                    this.$wrapper.delegate('.cardGroupTitle', 'click', function(){                        
                        $(this).toggleClass('expanded').next().slideToggle(300);    
                    });
                    
                    //----------------------------------------------------------------------------
                    
                    $('.isearchBar').click(function(){
                        return false;
                    });                    
                    $('.isearchBar .isearch').on('click', function(){
                        var $searchBox = $(this).parent().find('input');
                        if($searchBox.val().trim() || $searchBox.is(':visible')){
                            return false;
                        } 
                        $searchBox.css({
                            opacity : .5,
                            width : 0
                        }).show().animate({
                            width: 200,
                            opacity : 1
                        }, 200, 'easeIn', function(){
                            $(this).focus();
                        }); 
                        return false;
                    });
                    
                    $('.isearchBar input').on('blur', function(e){                        
                        if(!$(this).val().trim())
                            $(this).animate({
                                width: 0,
                                opacity : 0.5
                            }, 300, 'easeIn', function(){
                                $(this).hide();
                            });
                    }).on('keyup', function(){                                        
                        $('#' + $(this).attr('rid')).find('.cardWrapper').filterByText($(this).val(), '.cardName'); 
                    });
                    
                    //----------------------------------------------------------------------------
                    
                    $('.isearchBar .isearch').tooltipster({
                        theme : 'tooltipster-light'
                    });
                }
            }
        } 
    });
})();